<template>
    <ModalFormTemplate
      ref="modalRef"
      :open="open"
      :formConfig="formConfig"
      :title="title"
      :width="width"
      @cancel="onCancel"
      @finish="onFinish"
    />
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue';
  import ModalFormTemplate from '@/components/template/form/modal-form-template.vue';

  const title ="添加商户进件(支付宝官方)";//弹窗标题
  const width = 1000;//弹窗宽度
  const modalRef = ref();//通用模态弹窗组件引用，用与调用模态弹窗组件内部方法
  const open = ref(false);//控制弹窗显示、隐藏
  const emits = defineEmits<{ dataReload: []; }>();//通知调用组件(父组件) 执行 父组件 的 @dataReload 的方法
  defineExpose({ show });//暴露接口 show(显示弹窗) 方法，供 父组件 调用

  /* [关闭弹窗] 1. 重置表单 2. 关闭弹窗 */
  function onCancel() {
    modalRef.value.resetForm();
    open.value = false;
  } 

  /* [显示弹窗] 1. 显示弹窗 */
  function show() {
    open.value = true;
  }

  /* [提交弹窗] 1. 调用子组件 提交方法 2. 提交成功后，关闭弹窗 3. 刷新父组件数据 */
  async function onFinish() {
    const params = modalRef.value?.getFormParams();
    const mergedParams = {...addParams,...params};//合并提交参数
    try {
      const ret = await modalRef.value?.postFormData(addAction, mergedParams);
      if (ret === true) {
        onCancel();
        emits('dataReload');
      }
    } catch (error) {}
  }
  const addAction = 'base.merchant.mchexpand.ServiceImpl.save';//save接口 方法名
  const addParams = {mch_expand_id: 0,inquiry_type:1,expand_type:1};//save接口 参数



  /* [表单配置] */
  const formConfig = computed(() => [
    // -------- 经营信息 ------------------------------------------
    {
      dataIndex: 'title_business_info',
      title:"经营信息",
      type: 'separator' as const,
    },
    {
      title: '选择产品类型',
      dataIndex: 'product_type',
      type: 'radio' as const,
      required: true,
      defaultValue: 1,
      props: {
        options: [
          { label: '当面付', value: 1 },
        ]
      },
    },
    {
      title: '经营类目',
      dataIndex: 'business_category',
      type: 'cascader' as const,
      required: true,
      props:{
        options: [
          {
            value: '1', label: '休闲娱乐',children: [
              { value: '11', label: '歌舞厅/休闲场所/KTV' },
              { value: '12', label: '院线影城/演出赛事' },
              { value: '13', label: '健身房/瑜伽/舞蹈' },
              { value: '14', label: '游乐园/嘉年华' },
            ]
          },
          {
            value: '2', label: '生活服务',children: [
              { value: '21', label: '美容美发/美甲' },
              { value: '22', label: '洗浴/足疗/按摩' },
              { value: '23', label: '婚庆/摄影/摄像' },
              { value: '24', label: '家政服务' },
              { value: '25', label: '维修/安装/清洁' },
              { value: '26', label: '搬家/运输/物流' },
              { value: '27', label: '宠物服务' },
            ]
          },
          { value: '3', label: '到时候接口获取'}
        ]
      }
    },
    {
      title: '营业执照照片',
      dataIndex: 'license_copy',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    {
      title: '营业执照编号',
      dataIndex: 'license_number',
      type: 'input' as const,
      required: true,
    },
    {
      title: '营业执照是否长期有效', 
      dataIndex: 'license_period_validity',
      type: 'switch' as const,
      defaultValue: 2,
      required: true,
      props: {
        checkedChildren: '长期',
        checkedValue: 1,
        unCheckedChildren: '非长期',
        unCheckedValue: 2
      },
    },
    {
      title: '营业执照有效期截止日期',
      dataIndex: 'license_period_end',
      type: 'date-picker' as const,
      required: true,
      hidden(fromData) {
        return fromData.license_period_validity === 1;
      }
    },
    {
      title: '特殊资质照',
      dataIndex: 'qualifications',
      type: 'upload' as const,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    // -------- 店铺信息 ------------------------------------------
    {
      dataIndex: 'title_store_info',
      title:"店铺信息",
      type: 'separator' as const,
    },
    {
      title: '店铺名称全称',
      dataIndex: 'store_name',
      type: 'input' as const,
      required: true,
    },
    {
      title: '店铺地理位置选择省市县',
      dataIndex: 'area_code',
      type: 'cascader' as const,
      props: {
        options: {
          action: "base.manage.area.ServiceImpl.getAreaSelectDTO",
          params: {}
        }
      },
      required: true,
    },
    {
      title: '店铺详细地址',
      dataIndex: 'store_address',
      type: 'input' as const,
      required: true,
    },
    {
      title: '门头照',
      dataIndex: 'store_outer_img',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    {
      title: '店内环境照',
      dataIndex: 'store_inner_img',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    // -------- 账号信息 ------------------------------------------
    {
      dataIndex: 'title_account',
      title:"账号信息",
      type: 'separator' as const,
    },
    {
      title: '支付宝账号',
      dataIndex: 'account_no',
      type: 'input' as const,
      required: true,
    },
    // -------- 联系人信息 ------------------------------------------
    {
      dataIndex: 'title_contact_info',
      title:"联系人信息",
      type: 'separator' as const,
    },
    {
      title: '联系人姓名',
      dataIndex: 'contact_name',
      type: 'input' as const,
      required: true,
    },
    {
      title: '联系人电话',
      dataIndex: 'contact_phone',
      type: 'input-number' as const,
      required: true,
    },
    {
      title: '联系人邮箱',
      dataIndex: 'contact_email',
      type: 'input' as const,
      required: true,
    },
    // -------- 支付宝线下产品费率 ------------------------------------------
    {
      dataIndex: 'title_alipay_offline_rate',
      title:"支付宝线下产品费率",
      type: 'separator' as const,
    },
    {
      title: '配置方式', 
      dataIndex: 'offline_configuration_method',
      type: 'switch' as const,
      defaultValue: 2,
      props: {
        checkedChildren: '拆分配置',
        checkedValue: 1,
        unCheckedChildren: '合并配置',
        unCheckedValue: 2
      },
    },
    {
      title: '选择配置产品类型',
      dataIndex: 'mch_type',
      type: 'checkbox' as const,
      defaultValue: [1,2,3,4],
      required: true,
       hidden(fromData) {
        return fromData.offline_configuration_method !== 2;
      },
      props: {
        options: [
          { label: '支付宝条码', value: 1 },
          { label: '支付宝生活号', value: 2 },
          { label: '支付宝小程序', value: 3 },
          { label: '支付宝二维码', value: 4 },
        ]
      },
    },
    // 支付宝线下产品费率 ------------------------------------------------------------------------
    {
      dataIndex: 'title_alipay_offline_rate',
      title:"支付宝线下产品费率(合并配置)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.offline_configuration_method !== 2;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'offline_configuration_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.offline_configuration_method !== 2;
      }
    },
    {
      title: '进件费率',
      dataIndex: 'offline_configuration_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.offline_configuration_method !== 2 || fromData.offline_configuration_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } },
    },
    // 支付宝线下产品费率 ---------------------------------------------------------------------
    {
      dataIndex: 'title_alipay_bar_rate',
      title:"支付宝条码 (ALI_BAR)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_bar_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1;
      }
    },
    {
      title: '进件费率',
      dataIndex: 'ali_bar_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1 || fromData.ali_bar_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } },
    },
    // 支付宝生活号 -----------------------------------------------------------------------------
    {
      dataIndex: 'title_ali_jsapi_rate',
      title:"支付宝生活号 (ALI_JSAPI) ",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_jsapi_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1;
      }
    },
    {
      title: '进件费率',
      dataIndex: 'ali_jsapi_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1 || fromData.ali_jsapi_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } },
    },
    // 支付宝小程序 -----------------------------------------------------------------------------
    {
      dataIndex: 'title_ali_lite_rate',
      title:"支付宝小程序 (ALI_LITE)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_lift_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1;
      }
    },
    {
      title: '进件费率',
      dataIndex: 'ali_lift_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1 || fromData.ali_lift_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } },
    },
    // 支付宝二维码  -----------------------------------------------------------------------------
    {
      dataIndex: 'title_alipay_qr_rate',
      title:"支付宝二维码 (ALI_QR)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_qr_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1;
      }
    },
    {
      title: '进件费率',
      dataIndex: 'ali_qr_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.offline_configuration_method !== 1 || fromData.ali_qr_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } },
    },
    // -------- 支付宝线上产品费率 ------------------------------------------
    {
      dataIndex: 'title_alipay_online_rate',
      title:"支付宝线上产品费率",
      type: 'separator' as const,
    },
    {
      title: '配置方式', 
      dataIndex: 'online_configuration_method',
      type: 'switch' as const,
      defaultValue: 2,
      props: {
        checkedChildren: '拆分配置',
        checkedValue: 1,
        unCheckedChildren: '合并配置',
        unCheckedValue: 2
      },
    },
    {
      title: '选择配置产品类型',
      dataIndex: 'mch_type',
      type: 'checkbox' as const,
      defaultValue: [1,2,3,4,5,6,7,8,9],
      required: true,
       hidden(fromData) {
        return fromData.online_configuration_method !== 2;
      },
      props: {
        options: [
          { label: '支付宝APP', value: 1 },
          { label: '支付宝订单码', value: 2 },
          { label: '支付宝PC网站', value: 3 },
          { label: '支付宝预授权条码支付', value: 4 },
          { label: '支付宝预授权生活号', value: 5 },
          { label: '支付宝预授权二维码支付', value: 6 },
          { label: '支付宝WAP', value: 7 },
          { label: '支付宝扫码', value: 8 },
          { label: '当面付', value: 9 },
        ]
      },
    },
    // 支付宝线上产品费率 -----------------------------------------------------------------------------
    {
      dataIndex: 'title_alipay_online_rate',
      title:"支付宝线上产品费率(合并配置)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.online_configuration_method !== 2;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'onfline_configuration_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.online_configuration_method !== 2;
      }
    },
    {
      title: '进件费率',
      dataIndex: 'applyment_id',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.online_configuration_method !== 2 || fromData.onfline_configuration_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } },
    },
    // 支付宝APP -----------------------------------------------------------------------------
    {
      dataIndex: 'title_ali_app_rate',
      title:"支付宝APP (ALI_APP)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_app_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      },
    },
    {
      title: '进件费率',
      dataIndex: 'ali_app_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.online_configuration_method !== 1 || fromData.ali_app_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } }
    },
    // 支付宝订单码 -----------------------------------------------------------------------------
    {
      dataIndex: 'title_ali_oc_rate',
      title:"支付宝订单码 (ALI_OC)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_oc_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      },
    },
    {
      title: '进件费率',
      dataIndex: 'ali_oc_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.online_configuration_method !== 1 || fromData.ali_oc_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } }
    },
    // 支付宝PC网站 -----------------------------------------------------------------------------
    {
      dataIndex: 'title_ali_pc_rate',
      title:"支付宝PC网站 (ALI_PC) ",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_pc_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      },
    },
    {
      title: '进件费率',
      dataIndex: 'ali_pc_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.online_configuration_method !== 1 || fromData.ali_pc_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } }
    },
    // 支付宝预授权条码支付 ----------------------------------------------------------
    {
      dataIndex: 'title_ali_prebar_rate',
      title:"支付宝预授权条码支付 (ALI_PREBAR)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_prebar_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      },
    },
    {
      title: '进件费率',
      dataIndex: 'ali_prebar_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.online_configuration_method !== 1 || fromData.ali_prebar_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } }
    },
    // 支付宝预授权生活号 -------------------------------------------------
    {
      dataIndex: 'title_ali_prejsapi_rate',
      title:"支付宝预授权生活号 (ALI_PREJSAPI) ",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_prejsapi_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      },
    },
    {
      title: '进件费率',
      dataIndex: 'ali_prejsapi_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.online_configuration_method !== 1 || fromData.ali_prejsapi_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } }
    },
    // 支付宝预授权二维码支付 ----------------------------------------------
    {
      dataIndex: 'title_ali_preqr_rate',
      title:"支付宝预授权二维码支付 (ALI_PREQR)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_preqr_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      },
    },
    {
      title: '进件费率',
      dataIndex: 'ali_preqr_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.online_configuration_method !== 1 || fromData.ali_preqr_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } }
    },
    // 支付宝WAP -----------------------------------------------------------------------------
    {
      dataIndex: 'title_ali_wap_rate',
      title:"支付宝WAP (ALI_WAP)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_wap_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      },
    },
    {
      title: '进件费率',
      dataIndex: 'ali_wap_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.online_configuration_method !== 1 || fromData.ali_wap_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } }
    },
    // 支付宝扫码 -----------------------------------------------------------------------------
    {
      dataIndex: 'title_ali_scan_rate',
      title:"支付宝扫码 (ALIPAYSCAN)",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_scan_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      },
    },
    {
      title: '进件费率',
      dataIndex: 'ali_scan_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.online_configuration_method !== 1 || fromData.ali_scan_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } }
    },
    // 当面付 -----------------------------------------------------------------------------
    {
      dataIndex: 'title_ali_dmf_rate',
      title:"当面付 (DMF) ",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      }
    },
    {
      title: '是否开通', 
      dataIndex: 'ali_dmf_open',
      type: 'switch' as const,
      defaultValue: 1,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.online_configuration_method !== 1;
      },
    },
    {
      title: '进件费率',
      dataIndex: 'ali_dmf_rate',
      type: 'input' as const,
      required: true,
      defaultValue: '0.2',
      hidden(fromData) {
        return fromData.online_configuration_method !== 1 || fromData.ali_dmf_open !== 1;
      },
      props:{ suffix:"%",style:{ width:"100px" } }
    },

  ]);
</script>
<style lang="less" scoped></style>
